<template>
  <view class="tp" @click="$emit('navtab', information)">
    <view class="leftBox">
      <image :src="urls + information.CoverPath" class="image" />
      <view class="tag">
        <text class="text" v-if="information.State == 0">未开始</text>
        <text class="text" v-if="information.State == 1">直播中</text>
        <text class="text" v-if="information.State == 2">直播结束</text>
      </view>
    </view>
    <view class="rightBox">
      <view class="Title">
        <text class="text">{{ information.Title }}</text>
      </view>
      <view class="BeginTime">
        <text class="text">{{
          dayjs(information.BeginTime).format("YYYY-MM-DD HH:mm")
        }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from "dayjs";
import $config from "@/common/api/config.js";
export default {
  data() {
    return {
      dayjs,
      urls: "",
    };
  },
  props: {
    information: {
      type: Object,
      default: {},
    },
  },
  created() {
    this.urls = $config.domain.staticUrl;
  },
};
</script>

<style lang="scss" scoped>
.tp {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;

  .leftBox,
  .image {
    width: 240rpx;
    height: 150rpx;
    border-radius: 16rpx;
  }

  .tag {
    position: relative;
    left: 130rpx;
    top: -155rpx;
    z-index: 99;
    color: #fff;
    background-color: #f35370;
    width: 120rpx;
    border-radius: 12rpx;
    padding: 12rpx 16rpx;
    font-size: 28rpx;
    transform: scale(0.7);

    .text {
      text-align: center;
      color: #fff;
      font-size: 28rpx;
    }
  }

  .rightBox {
    margin-left: 20rpx;
    padding: 10rpx 0rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;

    .Title {
      .text {
        color: #fff;
        font-size: 30rpx;
        verflow: hidden;
        word-break: break-all;
        /* break-all(允许在单词内换行 */
        text-overflow: ellipsis;
        /* 超出部分省略号 */
        -webkit-box-orient: vertical;
        /* 设置或检索伸缩盒对象的子元素的排列方式 */
        -webkit-line-clamp: 2;
        /* 显示的行数 */
        lines: 2;
        /* NVUE下要用这个，让文字超出固定行数隐藏变省略号 */
      }
    }

    .BeginTime {
      .text {
        color: #fff;
        font-size: 24rpx;
        verflow: hidden;
        word-break: break-all;
        /* break-all(允许在单词内换行 */
        text-overflow: ellipsis;
        /* 超出部分省略号 */
        -webkit-box-orient: vertical;
        /* 设置或检索伸缩盒对象的子元素的排列方式 */
        -webkit-line-clamp: 2;
        /* 显示的行数 */
        lines: 2;
        /* NVUE下要用这个，让文字超出固定行数隐藏变省略号 */
      }
    }
  }
}
</style>